<template>
  <el-dialog
    :visible.sync="groupCrowdDialogData.isShow"
    title="选择分组"
    width="80%"
  >
    <!-- 搜索 -->
    <div class="search-box">
      <el-form ref="ruleForm" :inline="true" :model="formData">
        <el-form-item label="分组名称" prop="name">
          <el-input
            v-model.trim="formData.name"
            type="text"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button type="success" icon="el-icon-search" @click="toSearch">
            查询
          </el-button>
          <el-button type="success" plain @click="resetForm">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData">
      <el-table-column type="index" label="序号" align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="分组名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="totalNumber"
        label="人数"
        align="center"
      ></el-table-column>
      <el-table-column label="创建方式" align="center">
        <template slot-scope="{ row }">
          <span>{{
            row.groupCreationType | filterName('user_group_creation_type')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新方式" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.updateMethod | filterName('update_mode') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createdTime | timeToTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createdUser.userName || '---' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="success" @click="handelSelect(row)">
            选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </el-dialog>
</template>

<script>
import { userGroupList } from '@/api/userGroup'
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  props: ['groupCrowdDialogData'],
  data() {
    return {
      formData: { name: '' },
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      }
    }
  },
  async mounted() {
    this.searchList()
    /* 字典 更新方式 */
    await sysNormalDisable('update_mode', 'update_mode')
    /* 字典 创建方式 */
    await sysNormalDisable(
      'user_group_creation_type',
      'user_group_creation_type'
    )
  },
  methods: {
    searchList() {
      userGroupList(this.searchParams, (res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    toSearch() {
      Object.assign(this.searchParams, this.formData)
      this.searchList()
    },
    handelSelect(row) {
      this.$emit('groupEcho', row)
      this.groupCrowdDialogData.isShow = false
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>

<style lang="less"></style>
